<template>
  <el-select
    :value="value"
    filterable
    remote
    reserve-keyword
    placeholder="请输入学校名称"
    :remote-method="remoteMethod"
    :loading="loading"
    clearable
    @input="handleInput"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { schools } from '../api/app'

export default {
  name: 'HighSchoolSelect',
  props: {
    value: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      options: [],
      loading: false
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        schools({
          search: query
        }).then((data) => {
          console.log(111, data.data)
          this.options = data.data
        }).finally(() => {
          // this.options = []
          this.loading = false
        })
      } else {
        this.options = []
      }
    }
  }
}
</script>

<style scoped>

</style>
